<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title>新年流星雨</title>
	<style>
		body {
			background-color: #000000;
			padding: 0;
			border: #000000;
		}

		h1 {
			position: absolute;
			width: 100%;
			top: 45%;
			text-align: center;
			transform: translateY(-50%);
			font-family: 'Love Ya Like A Sister', cursive;
			font-size: 40px;
			color: #896960;
			line-height: 1.8;
			padding: 0 20px;
			box-sizing: border-box;
		}

		.title {
			font-size: 48px;
		}

		.sup {
			font-style: italic;
		}



		h1 p {
			font-size: 30px;
			position: absolute;
		}

		body,
		html {
			width: 100%;
			height: 100%;
			overflow: hidden
		}


		@keyframes num {

			/*动画*/
			0% {
				width: 450px;
				transform: translate(0px, -40px)
			}

			25% {
				width: 450px;
				transform: translate(1400px, 30px)
			}

			50% {
				width: 450px;
				transform: translate(0px, 40px)
			}

			70% {
				width: 450px;
				transform: translate(1400px, -30px)
			}

			100% {
				width: 450px;
				transform: translate(0px, -40px)
			}
		}
	</style>
</head>

<body onload="onload()">
	<h1 class="h1"></h1>
	<canvas id="stars"></canvas>
	<script>
		var context;//整个上下文
		var arr = new Array();//星星数组
		var starCount = 500; //星星开始数量

		var rains = new Array();//流星雨数组
		var rainCount = 20;//流星雨的数量

		//初始化画布及context
		function init () {
			//获取canvas
			var stars = document.getElementById("stars");
			//获取当前窗口的宽度和高度
			stars.width = window.innerWidth;//窗口宽度
			stars.height = window.innerHeight;//窗口高度
			//获取上下文context
			context = stars.getContext("2d");//返回画布环境2d画面效果

		}

		//创建星星对象
		var Star = function () {
			this.x = window.innerWidth * Math.random();//横坐标等于窗口宽度乘以1以内的随机数
			this.y = 5000 * Math.random();//纵坐标（就是窗口高度为5000乘以1以内随机数）
			this.text = "*";//星星文本
			this.color = "white";//星星颜色


			//产生随机黑白颜色方法
			this.getColor = function () {
				var r = Math.random();//获取随机数
				if (r < 0.5) {
					this.color = "#000000";//黑色
				} else {
					this.color = "white";//白色
				}
			}

			//初始化
			this.init = function () {
				this.getColor();//调用随机产生颜色
			}

			//绘制
			this.draw = function () {
				context.fillStyle = this.color;//填入颜色
				//text:规定在画布上输出的文本，
				//x:开始绘制文本的下坐标位置（相对于画布）
				//y:开始绘制文本y坐标位置（相对于画布）
				context.fillText(this.text, this.x, this.y);
			}
		}

		//星星闪烁方法
		function playStars () {
			//循环遍历星星数组，让每一个小星星闪
			for (var s = 0; s < starCount; s++) {
				arr[s].getColor();//调用产生随机黑白颜色的方法
				arr[s].draw();//绘制星星
			}
			setTimeout("playStars()", 100);//定时每100毫秒调用一次
		}


		//流星雨
		var MeteorRain = function () {
			this.x = -1;
			this.y = -1;
			this.length = -1;//长度
			this.angle = 30;//倾斜角度
			this.width = -1;//宽度
			this.height = -1;//高度
			this.speed = 1;//速度
			this.offset_x = -1;//横轴移动偏移量
			this.offset_y = -1;//纵轴移动偏移量
			this.alpha = 1;//透明度
			this.color1 = "";//流星的色彩
			this.color2 = "";//流星2的色彩

			//获取随机坐标的函数
			this.getPos = function () {
				this.x = Math.random() * window.innerWidth;//窗口宽度
				this.y = Math.random() * window.innerHeight;//窗口高度
			}

			//获取随机颜色
			this.getRandomColor = function () {
				var r = Math.ceil(255 - 240 * Math.random());//Math.ceil()对一个数进行上舍入。
				// //中段颜色
				// this.color1 = "rgba(" + r + "," + r + "," + r + ",1)";
				// //结束颜色
				// this.color2 = "black";
				//中段颜色
				this.color1 = "#375b8f";
				//结束颜色
				this.color2 = "black";
			}

			//初始化函数
			this.init = function () {
				this.getPos();//获取随机坐标的函数
				this.alpha = 1;//透明度
				this.getRandomColor();//获取随机颜色方法
				//流星雨的最小长度，最大长度
				var x = Math.random() * 80 + 150;
				//流星雨的长度
				this.length = Math.ceil(x);//对随机数进行上舍入
				this.angle = 30;//流星倾斜角
				x = Math.random() + 0.5;
				this.speed = Math.ceil(x);//流星雨的速度
				var cos = Math.cos(this.angle * 3.14 / 300);
				var sin = Math.sin(this.angle * 3.14 / 180);
				this.width = this.length * cos; //流星所占的宽度
				this.height = this.length * sin;//流星所占的高度
				this.offset_x = this.speed * cos;
				this.offset_y = this.speed * sin;
			}

			//绘制流星
			this.draw = function () {
				context.save();//保存当前图像状态的一份拷贝。
				context.beginPath();//重新开始新路径，而把之前的路径都清空掉
				context.lineWidth = 1;//宽度
				context.globalAlpha = this.alpha;//设置透明度
				//创建横向渐变颜色，起点坐标至终点坐标
				var line = context.createLinearGradient(this.x, this.y, this.x + this.width, this.y - this.height);
				//分段设置颜色渐变
				//addColorStop方法第一个参数：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
				//addColorStop方法第二个参数：设置颜色
				line.addColorStop(0, "#3d7ad3");
				line.addColorStop(0.3, this.color1);
				line.addColorStop(0.6, this.color2);
				context.strokeStyle = line;//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
				//起点移动到位置 x,y
				context.moveTo(this.x, this.y);
				//创建到达位置(this.x+this.width),(this.y-this.height) 的一条线
				context.lineTo(this.x + this.width, this.y - this.height);
				//closePath() 方法创建从当前点到开始点的路径。
				context.closePath();
				//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
				context.stroke();
				// restore：用来恢复Canvas之前保存的状态
				context.restore();

				// context.shadowBlur = Math.round((3 - this.size) * 10);
				// context.strokeStyle = "red";
				context.shadowBlur = 25;
				// context.shadowColor = "hsla(0, 10%, 60%,0.5)";
			}

			//重新计算流星坐标位置
			this.countPos = function () {
				//流星往左下移动，x减少，y增加
				this.x = this.x - this.offset_x;
				this.y = this.y + this.offset_y;

			}

			this.move = function () {
				//清空流星像素
				var x = this.x + this.width - this.offset_x;
				var y = this.y - this.height;
				//clearRect() 方法清空给定矩形内的指定像素。
				context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5);
				//调用流星重新计算位置方法,往左下移动
				this.countPos();
				//透明度增加
				this.alpha -= 0.002;
				//重绘
				this.draw();
			}

		}
		//绘制流星
		function playRains () {

			for (var i = 0; i < rainCount; i++) {
				var rain = rains[i];
				rain.move();//移动
				if (rain.y > window.innerHeight) {//超出界限后重来
					//clearRect() 方法清空给定矩形内的指定像素。
					context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);
					rains[i] = new MeteorRain();//创建一个流星对象
					rains[i].init();//调用流星初始化方法
				}
			}
			setTimeout("playRains()", 3);//定时每3毫秒调用一次方法
		}


		function time (futimg) {
			var obj = document.getElementsByClassName("h1")[0];
			var nowtime = new Date().getTime(); // 现在时间转换为时间戳
			var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳
			var msec = nowtime - futruetime; // 毫秒 未来时间-现在时间
			var time = (msec / 1000);  // 毫秒/1000
			var day = parseInt(time / 86400); // 天  24*60*60*1000 
			var hour = parseInt(time / 3600) - 24 * day;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
			var minute = parseInt(time % 3600 / 60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
			var second = parseInt(time % 60);  // 以60秒为一整份 取余 剩下秒数
			obj.innerHTML = "小姐姐<br><span class='title'>你已经来到这个世界：<br>" + day + "天" + hour + "小时" + minute + "分" + second + "秒" + "了</span><br><span class='sup'>这是一个特别的生日祝福！<br>愿所有的幸福、<br>所有的快乐、<br>所有的好运围绕在你身边。<br>生日快乐！！！</span>"
			// setInterval("time('2000/1/1')", 1000);
		}
		function onload () {
			init();//调用初始化方法
			//循环画星星
			for (var i = 0; i < starCount; i++) {
				var star = new Star();//创建一个星星对象
				star.init();//调用星星初始化方法
				star.draw();//调用绘制星星方法
				arr.push(star);//将星星添加到星星数组
			}

			//画流星
			for (var i = 0; i < rainCount; i++) {
				var rain = new MeteorRain();//创建一个流星对象
				rain.init();//调用流星初始化方法
				rain.draw(); //调用绘制流星方法
				rains.push(rain);//将流星添加到流星数组
			}
			playStars();//调用绘制星星方法
			playRains();//调用绘制流星的方法

			time('1997/3/14');     // 生日时间
		}


	</script>
	<audio autoplay="autoplay"
				 loop="loop"
				 preload="auto"
				 src="http://music.163.com/song/media/outer/url?id=1337065812.mp3">
	</audio>
</body>



</html>